<template>
  <div>
    <el-form ref="sunburstSetting" :model="setting" label-position="top">
      <el-form-item :label="$t('custom.component.gadget.sunburst.title')">
        <el-input v-model="setting.title" :placeholder="$t('custom.component.gadget.sunburst.title')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.dimension')">
        <el-select v-model="setting.dimension" style="width: 100%" @change="handleChangeSource">
          <el-option v-for="item in dataSourceColumns" :label="item" :value="item" :key="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.measure')">
        <el-select v-model="setting.measure" style="width: 100%" @change="handleChangeSource">  
          <el-option v-for="item in dataSourceColumns" :label="item" :value="item" :key="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.sunburst.children')" class="sunburst-justify">
        <el-button :disabled="!setting.dimension || !setting.measure" size="small" @click="handleSettingChildren">
          {{$t('statement.setting')}}
        </el-button>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.sunburst.radius')">
        <el-input-number style="width:100%;line-height:30px;" v-model="radius" size="small"  :min="10" :max="100" @change="handleChangeRadius"></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.sunburst.sort')">
        <el-select v-model="setting.sort" style="width: 100%">
          <el-option v-for="item in sortOptions" :label="item" :value="item" :key="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.showLabel')"  class="sunburst-justify">
        <el-switch
          v-model="setting.showLabel">
        </el-switch>
      </el-form-item>
      <el-form-item label="Label Format">
        <quill-editor ref="myTextEditor" v-model="setting.quillContent" :options="options">
          <div id="toolbar" slot="toolbar">
            <!-- Add a bold button -->
            <button class="ql-bold">Bold</button>
<!--            <button class="ql-italic">Italic</button>-->
            <el-popover
                popper-class="sunburst-format"
                placement="top-start"
                width="300"
                ref="popover"
                trigger="click">
              <div class="label-format">
                <div class="label-format-item" v-for="item in formatLabel" :key="item" @click="addFormat(item)">{{item}}</div>
              </div>
              <el-button class="ql-custom-button" icon="cuifont icon_insert_token" slot="reference"></el-button>
            </el-popover>
          </div>
        </quill-editor>
      </el-form-item>
      <el-form-item  size="small" class="sunburst-justify">
        <template slot="label">
          {{$t('custom.component.gadget.sunburst.align')}}
          <el-tooltip class="item" effect="dark" content="Align of label text" placement="right">
            <i class="cuifont icon_help_circle" style="color:rgb(127, 127, 127);font-size:12px;cursor:pointer;font-weight:bold"/>
          </el-tooltip>
        </template>
        
        <el-radio-group v-model="setting.align" style="margin-bottom: 30px;">
          <el-radio-button label="left">
            <span class="cuifont icon_align_left" style="font-size:14px;" />
          </el-radio-button>
          <el-radio-button label="center">
            <span class="cuifont icon_align_vertical_center" style="font-size:14px;" />
          </el-radio-button>
          <el-radio-button label="right">
            <span class="cuifont icon_align_right" style="font-size:14px;" />
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item  size="small" class="sunburst-justify">
        <template slot="label">
          {{$t('custom.component.gadget.sunburst.minAngle')}}
          <el-tooltip class="item" effect="dark" content="If angle of data piece is smaller than this value (in degress), then text is not displayed." placement="right">
            <i class="cuifont icon_help_circle" style="color:rgb(127, 127, 127);font-size:12px;cursor:pointer;font-weight:bold"/>
          </el-tooltip>
        </template>
        
        <el-input-number v-model="setting.minAngle"  :min="1" :max="100" />
      </el-form-item>
    </el-form>
    <SunburstChildren :visible.sync="visible" :setting="setting" :source="dataSourceColumns" @result="getResult"/>
  </div>
</template>

<script>
import SunburstChildren from './sunburst-children'
export default {
  name: 'sunburstSetting',
  components: { SunburstChildren },
  data () {
    return {
      options: {
        modules: {
          toolbar: '#toolbar'
        }
      },
      formatLabel: ['{CurrentDimensionName}', '{ParentDimensionMeasureValue}', '{MeasurePercentage}', '{CurrentDimensionMeasureValue}'],
      setting: {
        title:null,
        dimension:null,
        measure:null,
        radius: 90,
        sort: 'desc',
        showLabel: true,
        align: 'center',
        minAngle:30,
        resultData:null,
        quillContent: ''
      },
      sortOptions:['desc','asc'],
      dataSourceColumns: [],
      visible:false,
      radius:90
    }
  },
  props: [
    'data', 'fieldsList'
  ],
  watch: {
    data (value, oldValue) {
      return this.updateSetting(value)
    },
    fieldsList (val) {
      let temp = []
      this.dataSourceColumns = []
      val.forEach(item => {
        temp.push(item.name)
      })
      this.dataSourceColumns = temp
    },
    radius(val){
      this.$set(this.setting,'radius',val)
    },
    setting:{
      handler:function(val){
        this.radius = val.radius
      },
      deep:true
    }
  },
  computed: { },
  created () {
    if (this.data) {
      this.$set(this.data)
    }
  },
  methods: {
    addFormat (item) {
      const { quill } = this.$refs.myTextEditor
      this.$refs.popover.doClose()
      quill.insertText(quill.selection.savedRange.index, item);
    },
    getData () {
      return this.setting
    },
    updateSetting (value, list, layerStatus) {
      this._.merge(this.setting, value.gadgetSetting)
      this.$emit('update:data', this.setting)
    },
    handleSettingChildren(){
      this.visible = true
    },
    getResult(result){
      this.setting.resultData = result
    },
    handleChangeSource(){
      this.setting.resultData = null
    },
    handleChangeRadius(value){
    }

  }
}
</script>
<style lang="scss">
.sunburst-justify{
  display: flex;
  position: relative;
  margin-top: 22px;
  .el-form-item__content{
    position: absolute;
    right: 0;
  }
}
.sunburst-format {
  padding-left: 0;
  padding-right: 0;
  .label-format {
    &-item {
      line-height: 32px;
      cursor: pointer;
      padding: 0 12px;
    }
    &-item:hover {
      background: #f5f7fa;
    }
  }
}

</style>
